<script setup>
import { loginApi } from '@/api/manager'
import { ElNotification } from 'element-plus'
import { ref } from 'vue'
import { setToken } from '@/utils/cookie'
import { useRouter } from 'vue-router'

const loading = ref(false)
const router = useRouter()
const form = ref({
  username: 'admin',
  password: 'admin'
})

const formRef = ref(null)
const rules = {
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
}

const onLogin = async () => {
  const val = await formRef.value.validate((val) => val)
  if (!val) return false

  loading.value = true

  loginApi(form.value.username, form.value.password)
    .then((res) => {
      //登录成功提示
      ElNotification({
        message: '登录成功',
        type: 'success',
        duration: 3000
      })
      //存储token
      setToken(res.token)

      //路由跳转到后台首页
      router.push('/')
    })
    .finally(() => {
      loading.value = false
    })
}
</script>

<template>
  <div class="login">
    <div class="login-panel">
      <div class="bg"></div>
      <div class="panel-login">
        <div class="logo">
          <img src="@/assets/img/logo.png" alt="" />
          <h2>Sokach后台管理系统</h2>
        </div>
        <div class="form">
          <el-form ref="formRef" :model="form" size="large" :rules="rules" status-icon>
            <el-form-item prop="username">
              <el-input prefix-icon="User" v-model="form.username" />
            </el-form-item>
            <el-form-item prop="password" style="margin-bottom: 12px">
              <el-input prefix-icon="Lock" type="password" v-model="form.password" show-password />
            </el-form-item>
          </el-form>
        </div>
        <el-button
          :loading="loading"
          type="primary"
          size="large"
          style="width: 100%"
          @click="onLogin"
          >登 录</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/img/login_background.jpg);
  background-size: cover;

  .login-panel {
    width: 96vw;
    height: 94vh;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .logo {
      display: flex;
      align-items: center;
      margin: 30px 0;

      img {
        width: 80px;
      }

      h2 {
        font-size: 30px;
        padding-left: 20px;
        font-weight: 400;
      }
    }

    .bg {
      background-image: url(@/assets/img/login_left.svg);
      background-size: cover;
      width: 40%;
      height: 60%;
    }

    .panel-login {
      width: 470px;
      background-color: #fff;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
    }
  }

  .checkbox {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
